<div>
    <ul class="layui-timeline">
        <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
            <div class="layui-timeline-left">
                <p>09:59</p>
                <p>2020-05-13</p>
                <a href="javascript:;" class="avatar-popover">Linda Li</a>
            </div>
            <div class="layui-timeline-content">
                <div class="container">
                    <div class="mb-5"><strong>joborder</strong></div>
                    <ul>
                        <li>公司名称: <del>最近工作职位互联网软件开发工程师公司</del> 南京汇银迅信息技术有限公司</li>
                        <li>时间变更: <del>2020-04-27 16:13:48</del> 2020-04-27 16:13:48</li>
                    </ul>
                </div>
            </div>
        </li>
        <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
            <div class="layui-timeline-left">
                <p>09:59</p>
                <p>2020-05-13</p>
                <a href="javascript:;" class="avatar-popover">Linda Li</a>
            </div>
            <div class="layui-timeline-content">
                <div class="container">
                    <div class="mb-5"><strong>joborder</strong></div>
                    <ul>
                        <li>职位名称: <del>产品经理</del> 互联网软件开发工程师</li>
                        <li>时间变更: <del>2020-04-27 16:13:48</del> 2020-04-27 16:13:48</li>
                    </ul>
                </div>
            </div>
        </li>
        <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
            <div class="layui-timeline-left">
                <p>09:59</p>
                <p>2020-05-13</p>
                <a href="javascript:;" class="avatar-popover">Linda Li</a>
            </div>
            <div class="layui-timeline-content">
                <div class="container">
                    <div class="mb-5"><strong>joborder</strong></div>
                    <ul>
                        <li>状态: <del>Closed</del> Filled</li>
                        <li>时间变更: <del>2020-04-27 16:13:48</del> 2020-04-27 16:13:48</li>
                    </ul>
                </div>
            </div>
        </li>
    </ul>
</div>
<script type="text/html" id="userInfoTemp">
    <div class="tips-user-card">
        <div class="item-row">
            <span class="item-label">用户</span>
            <span class="item-value">
                <a layuimini-href="page/finance/index.html">{{d.username}}</a>
            </span>
        </div>
        <div class="item-row">
            <span class="item-label">团队</span>
            <span class="item-value">Jennifer Sun</span>
        </div>
        <div class="item-row">
            <span class="item-label">职位</span>
            <span class="item-value">商务合伙助理</span>
        </div>
        <div class="item-row">
            <span class="item-label">手机</span>
            <span class="item-value">18333195861</span>
        </div>
        <div class="item-row">
            <span class="item-label">办公电话</span>
            <span class="item-value">86-10 8525-4290</span>
        </div>
        <div class="item-row">
            <span class="item-label">邮箱</span>
            <a class="item-value"></a>
            <a href="mailto:linda.lic@manpowergrc.com">linda.lic@manpowergrc.com</a>
        </div>
    </div>
</script>
<script>
    layui.use(['layer', 'utils', 'laytpl'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            utils = layui.utils,
            laytpl = layui.laytpl;

        $('.avatar-popover').click(function () {
            var $this = $(this);
            var _id = $this.data('id');
            utils.Ajax({
                url: 'api/city.json',
                dataType: 'json',
                type: 'post',
                data: {id: _id},
                success: function (response) {
                    // var data = response;

                    // ** 测试数据 删除 **
                    var data = {
                        username: 'Linda Li'
                    };
                    // ** 测试数据 删除 **

                    laytpl($('#userInfoTemp').html()).render(data, function(content){
                        layer.tips(content, $this, {
                            tips: [3, '#fff'],
                            area: '360px',
                            time: false,
                            closeBtn: 1
                        });
                    });
                }
            })


        })
    })
</script>